<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script src="../js/vue.js"></script>
		<script src="../js/element.js"></script>
		<script src="../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-container class="body-container">
				<!-- 头部信息 -->
				<el-header height="50px">
					<div class="user">
						<el-row :gutter="20">
							<!-- logo -->
							<el-col :span="4">
								<div class="grid-content bg-purple">
									<img src="../images/logo.png" width="24%">
								</div>
							</el-col>
							<!-- 标题 -->
							<el-col :span="16">
								<div class="title">
									音小悦后台管理系统
								</div>
							</el-col>
							<!-- 员工头像及下拉菜单 -->
							<el-col :span="4">
								<div class="employee" @click="employeeMenuEnable">
									<span class="head-img">
										<el-avatar size="large" fit="" :src="employee.image"></el-avatar>
									</span>
									<div class="employeeMenu">
										<h3>欢迎，{{employee.username}}</h3>
										<ul>
											<li @click="getMenuUrl('./employeeMenus/employeeInfo.html')"><i
													class="el-icon-tickets"></i>&nbsp;个人信息</li>
											<li>
												<el-upload action="http://localhost:8080/employee/uploadImage"
													method="post" :headers="headers" :show-file-list="false"
													:on-success="uploadSuccess">
													<i class="el-icon-picture-outline"></i>&nbsp;更换头像
												</el-upload>
											</li>
											<li @click="drawer = true"><i class="el-icon-key"></i>&nbsp;修改密码</li>
											<li @click="logout"><i class="el-icon-switch-button"></i>&nbsp;安全退出</li>
										</ul>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-header>
				<!-- 右侧抽屉，修改密码 -->
				<el-drawer title="修改密码" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
					<div class="updateForm">
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm">
							<el-form-item label="原密码" prop="originalPassword">
								<el-input type="password" v-model="ruleForm.originalPassword" autocomplete="off" show-password></el-input>
							</el-form-item>
							<el-form-item label="新密码" prop="newPassword">
								<el-input type="password" v-model="ruleForm.newPassword" autocomplete="off" show-password></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="checkPassword">
								<el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off" show-password></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="updatePassword">提交</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-drawer>
				<!-- 用户权限菜单 -->
				<el-container class="s-m-container">
					<el-aside width="150px">
						<el-menu default-active="1" class="el-menu-vertical-demo">
							<el-submenu v-if="menu.children.length!=0" :index="menu.perms" v-for="menu in menuList">
								<template slot="title">
									<i :class="menu.icon"></i>
									<span>{{menu.menu}}</span>
								</template>
								<el-menu-item :index="item.path" v-for="item in menu.children"
									@click="getMenuUrl(item.path)">
									<i :class="item.icon"></i>
									<span>
										{{item.menu}}
									</span>
								</el-menu-item>
							</el-submenu>
							<el-menu-item :index="menu.path" v-else @click="getMenuUrl(menu.path)">
								<i :class="menu.icon"></i>
								<span slot="title">{{menu.menu}}</span>
							</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main>
						<div class="main_right">
							<iframe frameborder="0" scrolling="no" :src="menuUrl"></iframe>
						</div>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				// 修改密码，表单验证，再次输入密码
				var check = (rule, value, callback) => {
					if (value === '') {
						callback(new Error('请再次输入密码'));
					} else if (value !== this.ruleForm.newPassword) {
						callback(new Error('两次输入密码不一致!'));
					} else {
						callback();
					}
				};
				return {
					headers: {
						"token": localStorage.getItem('token')
					},
					visible: false,
					username: 'pony',
					employee: {
						id: '',
						username: ''
					},
					menuList: '',
					menuUrl: 'menus/list.html', //默认展示首页
					drawer: false, //修改密码 抽屉开关
					// 修改密码 表单信息
					ruleForm: {
						originalPassword: '', //修改密码，原密码
						newPassword: '', //修改密码，新密码
						checkPassword: '' //修改密码，重新输入密码
					},
					// 修改密码 表单验证规则
					rules: {
						originalPassword: [{ 
							required: true, 
							message: '请输入原密码', 
							trigger: 'blur' ,
						}],
						newPassword: [{
							required: true,
							message: '请输入原密码', 
							trigger: 'blur' ,
						}],
						checkPassword: [{
							validator: check,
							trigger: 'blur'
						}]
					}
				}
			},
			mounted() { // 生命周期函数
				this.isLogin(),
					this.showEmployeeInfo(),
					this.getMenuList()
			},
			methods: {
				// 用户登录校验
				isLogin() {
					// 未登录，返回登录页面
					let jwtToken = localStorage.getItem('token')
					console.log(jwtToken)
					if (jwtToken == null || jwtToken == undefined) {
						window.location.href = 'login.html'
					}
				},
				// 登录用户信息展示
				showEmployeeInfo() {
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/employee/info',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.employee = res.data.data.employeeInfo
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 左边菜单列表获取
				getMenuList() {
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/employee/menu',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.menuList = res.data.data.menuList
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// iframe 内嵌网页 地址
				getMenuUrl(url) {
					console.log(url)
					this.menuUrl = url
				},
				//用户小菜单开关
				employeeMenuEnable() {
					const employeeMenu = document.querySelector('.employeeMenu');
					//切换类：active，存在删除，不存在，就添加;
					employeeMenu.classList.toggle('active');
				},
				//上传头像成功的钩子
				uploadSuccess(response) {
					console.log(response)
					if (response.code == 200) {
						this.$message.success(response.message)
						//重新加载列表数据
						this.showEmployeeInfo()
					} else {
						this.$message.error("系统错误请联系管理员！")
					}
				},
				// 修改密码
				updatePassword() {
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'put',
						url: 'http://localhost:8080/employee/update/' + this.ruleForm.originalPassword + '/' + this.ruleForm.newPassword,
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.$message.success(res.data.message)
							// 关闭抽屉
							this.handleClose()
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 关闭抽屉
				handleClose(){
					//  清空数据
					this.ruleForm.originalPassword = '',
					this.ruleForm.newPassword= '',
					this.ruleForm.checkPassword = '',
					// 关闭
					this.drawer = false // 关闭抽屉
				},
				// 后端会将 token 从 reids 中删除，这个token已经不能在访问后端资源了
				// 同时 前端也要将这个 token 从浏览器中删除
				logout(){
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/employee/logout',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						//处理返回的数据，如果成功，提示用户，并删除浏览器中的 token
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.$message.success(res.data.message)
							// 删除浏览器缓存中的 token
							localStorage.removeItem("token")
							// 转向登录页
							location.href = 'login.html'
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				}
			}
		})
	</script>
</html>
